<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>房源管理</el-breadcrumb-item>
        <el-breadcrumb-item>房源列表</el-breadcrumb-item>
        </el-breadcrumb>
      <el-card>

          <el-row :gutter="25">
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="房源信息" v-model="queryParams.title" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="房源编码" v-model="queryParams.code" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="委托人名称" v-model="queryParams.constact" /> 
              </el-col>
               <el-col :span="5" style="margin-bottom:15px">
                  <el-input size="small" clearable placeholder="省份" v-model="queryParams.province" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="城市" v-model="queryParams.area" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="具体地址" v-model="queryParams.address" /> 
              </el-col>
              <el-col :span="3">
                  <el-input  size="small" clearable placeholder="租金" v-model="queryParams.minRent" />
              </el-col>
              <el-col :span="1">
                  <span class="font-class">至</span>
              </el-col>
              <el-col :span="3">
                  <el-input  size="small" clearable placeholder="租金" v-model="queryParams.maxRent" />
              </el-col>
              <el-col :span="4"><!--getUserListByGroupName-->
                <template>
                <el-select v-model="queryParams.status" filterable clearable placeholder="状态" size="small">
                    <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.keyDesc"
                    :value="item.value">
                    </el-option>
                </el-select>
                </template>
             </el-col>
             <el-col :span="4" style="margin-top:15px"><!--getUserListByGroupName-->
                <template>
                <el-select v-model="queryParams.time" filterable clearable placeholder="看房时间" size="small">
                    <el-option
                    v-for="item in timeList"
                    :key="item.id"
                    :label="item.keyDesc"
                    :value="item.value">
                    </el-option>
                </el-select>
                </template>
             </el-col >
              <el-col :span="2" style="margin-top:15px;">
                  <el-button size="small" type="success" @click="queryPage" icon="el-icon-search" v-if="permissionStrValue.indexOf('houseList:query') !== -1">查询</el-button>
              </el-col>
               <el-col :span="1" style="margin-top:15px;">
                  <el-button size="small" type="danger" @click="clear" icon="el-icon-delete">清空</el-button>
              </el-col>
          </el-row>
      <!--放表格-->
        <el-table :data="list" border stripe  max-height="450" style="width: 100%">
            <el-table-column type="index" label="#" fixed></el-table-column>
            <el-table-column label="房源编号" width="200">
                <template slot-scope="scope">
                    <span size="medium">{{ scope.row.code }}</span>
                </template>
            </el-table-column>
            <el-table-column label="房源信息" width="250">
                <template slot-scope="scope">
                    <span size="medium">{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="委托人" width="120">
                <template slot-scope="scope">
                    <span size="medium">{{ scope.row.constact }}</span>
                </template>
            </el-table-column>
            <el-table-column label="委托时间" width="120">
                <template slot-scope="scope">
                    <span size="medium">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号" width="120">
                <template slot-scope="scope">
                    <span size="medium">{{ scope.row.phone}}</span>
                </template>
            </el-table-column>
            <el-table-column label="看房时间" width="100">
                <template slot-scope="scope">
                    <span size="medium" v-if="scope.row.time === 1">上午</span>
                    <span size="medium" v-if="scope.row.time === 2">中午</span>
                    <span size="medium" v-if="scope.row.time === 3">下午</span>
                    <span size="medium" v-if="scope.row.time === 4">晚上</span>
                    <span size="medium" v-if="scope.row.time === 5">全天</span>
                    <span size="medium" v-if="scope.row.time === 6">需提前预约</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <span size="medium" v-if="scope.row.status === 1">待审核</span>
                    <span size="medium" v-if="scope.row.status === 2">空置中</span>
                    <span size="medium" v-if="scope.row.status === 3">空置中</span>
                    <span size="medium" v-if="scope.row.status === 4">已出租</span>
                    <span size="medium" v-if="scope.row.status === 5">审核不通过</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="120">
                <template slot-scope="scope">
                    <span size="medium">{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="修改时间" width="120">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.modifyTime}}</span>
                </template>
            </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="170">
                <template slot-scope="scope" >
                    <el-button @click="details(scope.row.id)" type="text" size="small" v-if="permissionStrValue.indexOf('houseList:info') !== -1">详情</el-button>
                    <el-button @click="edit(scope.row.id)" type="text" size="small" v-if="permissionStrValue.indexOf('houseList:update') !== -1">编辑</el-button>
                    <el-button @click="updateStatus(scope.row.id)" type="text" size="small" v-if="scope.row.status == 1 && permissionStrValue.indexOf('houseList:updateStatus') !== -1">审核</el-button>
                    <el-button @click="deleteById(scope.row.id)" type="text" size="small" v-if="permissionStrValue.indexOf('houseList:delete') !== -1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentPageChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>

      <el-dialog
       title="房源详情"
       :visible.sync="infoFlag"
       width="70%"
       >
       <span style="color:#409EFF">状态：{{info.status}}</span>
       <el-divider></el-divider>
       <span style="color:red;margin-bottom:15px">楼盘信息</span>
       <el-form :model="info" label-width="100px" ref="infoForm" label-position="left" :rules="inofRules">
         <el-form-item label="楼盘名称" prop="name">
           <el-input v-model="info.estateName" size="small" type="text" style="width:400px" disabled></el-input>
         </el-form-item>
         <el-form-item label="省市区" >
            <el-input v-model="info.province" size="small" type="text" style="width:100px" disabled></el-input>
            <el-input v-model="info.city" size="small" type="text" style="width:100px;margin-left:10px" disabled></el-input>
            <el-input v-model="info.area" size="small" type="text" style="width:100px;margin-left:10px" disabled></el-input>
         </el-form-item>
         <el-form-item label="详细地址" prop="address">
           <el-input v-model="info.address" size="small" style="width:400px"  disabled></el-input>
         </el-form-item>
         <el-row>
            <el-col :span="8">
                <el-form-item label="建筑年代" prop="year">
                <el-input v-model="info.year" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="建筑类型" prop="type">
                <el-input v-model="info.type" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="物业费" prop="propertyCost">
                <el-input v-model="info.propertyCost" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="物业公司" prop="propertyCompany">
                <el-input v-model="info.propertyCompany" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="开发商" prop="developers">
                <el-input v-model="info.developers" size="small" style="width:100px" disabled></el-input>
            </el-form-item>
              </el-col>
         </el-row>
         
         <!-- ------------------------------------------房源信息---------------------------------------------- -->
         <el-divider></el-divider>
          <span style="color:red">房源信息</span>

        <el-form-item label="房源标题" prop="title">
            <el-input v-model="info.title" style="width:400px" size="small" disabled ></el-input>
        </el-form-item>
        <el-form-item label="房源编号">
            <el-input v-model="info.code" style="width:400px" size="small" disabled></el-input>
        </el-form-item>
        <el-row>
            <el-col :span="8">
                <el-form-item label="租金" prop="rent">
                    <el-input v-model="info.rent" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="支付方式" prop="paymentMethod">
                <el-input v-model="info.paymentMethod" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="租赁方式" prop="rentMethod">
                    <el-input v-model="info.rentMethod" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="户型" >
                    <el-input v-model="info.houseType" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="建筑面积" prop="coveredArea">
                    <el-input v-model="info.coveredArea" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="使用面积" prop="useArea">
                    <el-input v-model="info.useArea" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="楼层" >
                    <el-input v-model="info.floor" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="朝向" prop="orientation">
                    <el-input v-model="info.orientation" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="装修" prop="decoration">
                <el-input v-model="info.decoration" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="配套设施">
                    <el-input v-model="info.facilities" style="width:400px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <!-- -------------------------------------图片信息----------------------------------------------- -->
        <el-divider></el-divider>
        <span style="color:red">图片信息</span>
        <el-form-item label="房源描述" prop="houseDesc">
            <el-input v-model="info.houseDesc" style="width:500px" size="small" type="textarea" :rows="5" disabled></el-input>
        </el-form-item>

        <el-form-item label="室内图片">
           <el-image 
                    v-for="(file, index) in info.images" :key="index"
                    style="width: 100px; height: 100px; magrin-left:2px"
                    :src="file" 
                    :preview-src-list="info.images">
                </el-image>
        </el-form-item>

         <!-- -------------------------------------业主信息----------------------------------------------- -->
         <el-divider></el-divider>
         <span style="color:red">业主信息</span>
         <el-form-item label="业主" >
            <el-input v-model="info.constact" style="width:200px" size="small" disabled></el-input>
            <el-input v-model="info.phone" style="width:200px;margin-left:10px;" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="委托时间" >
             <el-input v-model="info.createTime" style="width:400px" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="看房时间" prop="time">
             <el-input v-model="info.time" style="width:400px" size="small" disabled></el-input>
        </el-form-item>

       </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="infoFlag = false">取 消</el-button>
       </span>

     </el-dialog>

    <el-dialog title="编辑" :visible.sync="updateData.updateDialogVisible" width="70%" >
        <span style="color:red">房源信息：</span>
        <el-form ref="infoUpdateForm" :model="info" label-width="100px" :rules="infoRules">
        <el-form-item label="楼盘名称" prop="estateName">
            <el-input v-model="info.estateName" style="width:400px" size="small" placeholder="请点击查询选择" disabled></el-input>
            <el-button size="small" type="primary" @click="updateData.showTable = true" icon="el-icon-search" style="margin-left:10px">查询</el-button>
        </el-form-item>
        <el-form-item label="楼盘地址">
            <el-input v-model="info.address" style="width:400px" size="small" placeholder="自动带出" disabled></el-input>
        </el-form-item>
        <el-form-item label="建筑年代" >
            <el-input v-model="info.year" style="width:150px" size="small" placeholder="自动带出" disabled></el-input>
            <span style="margin-left:10px;">年</span>
        </el-form-item>
        <el-form-item label="物业费" >
            <el-input v-model="info.propertyCost" style="width:150px" size="small" placeholder="自动带出" disabled></el-input>
            <span style="margin-left:10px;color:red">元/月</span>
        </el-form-item>
        <el-row>
            <el-col :span="8">
                <el-form-item label="栋号" prop="buildingNum">
                    <el-input v-model="info.buildingNum" style="width:150px" size="small" placeholder="输入栋号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="单元号" prop="buildingUnit">
                    <el-input v-model="info.buildingUnit" style="width:150px;margin-left:10px" size="small" placeholder="输入单元号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="门牌号" prop="buidingFloorNum">
                    <el-input v-model="info.buidingFloorNum" style="width:150px;margin-left:10px" size="small" placeholder="输入门牌号"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="房源标题" prop="title">
            <el-input v-model="info.title" style="width:400px" size="small" placeholder="请输入标题" ></el-input>
        </el-form-item>
        <el-form-item label="房源编号">
            <el-input v-model="info.code" style="width:400px" size="small" placeholder="自动生成" disabled></el-input>
        </el-form-item>
        <el-form-item label="租金" prop="rent">
            <el-input v-model="info.rent" style="width:200px" size="small" placeholder="输入租金"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="info.paymentMethod" placeholder="请选择支付方式" size="small">
            <el-option
                        v-for="item in updateData.paymentMethodList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="租赁方式" prop="rentMethod">
            <el-select v-model="info.rentMethod" placeholder="请选择租赁方式" size="small">
            <el-option
                        v-for="item in updateData.rentMethodList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-row>
            <el-col :span="8">
                <el-form-item label="户型" prop="houseType">
                    <el-input v-model="info.houseType" style="width:200px" size="small"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="建筑面积" prop="coveredArea">
                    <el-input v-model="info.coveredArea" style="width:100px" size="small"></el-input>
                    <span style="margin-left:10px;">㎡</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="使用面积" prop="useArea">
                    <el-input v-model="info.useArea" style="width:100px" size="small"></el-input>
                    <span style="margin-left:10px;">㎡</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="楼层" prop="floor">
                <el-input v-model="info.floor" style="width:100px" size="small" ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="朝向" prop="orientation">
            <el-select v-model="info.orientation" placeholder="请选择房屋朝向" size="small">
            <el-option
                        v-for="item in updateData.orientationList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="装修" prop="decoration">
            <el-select v-model="info.decoration" placeholder="请选择装修类型" size="small">
            <el-option
                        v-for="item in updateData.decorationList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="配套设施" >
            <el-checkbox-group v-model="facilitiesArray" >
            <el-checkbox
                   v-for="item in updateData.facilitiesList"
                   :key="item.id"
                   :label="item.keyDesc"
                   >
            </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <span style="color:red">图片信息：</span>
        <el-form-item label="房源描述" >
            <el-input v-model="info.houseDesc" style="width:500px" size="small" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="原室内图片">
            <div class="demo-image__preview" >
                <el-image 
                    v-for="(file, index) in info.images" :key="index"
                    style="width: 100px; height: 100px; magrin-left:2px"
                    :src="file" 
                    :preview-src-list="info.images">
                </el-image>
            </div>
        </el-form-item>

        <el-form-item label="更改图片">
            <template >
                <el-button type="warning" size="small" @click="submitUpload(info.id)">重新上传</el-button>
                
            </template>
        </el-form-item>
        
        <span style="color:red">出租信息：</span>
        <el-row>
            <el-col :span="8" >
                <el-form-item label="业主" prop="constact">
                    <el-input v-model="info.constact" style="width:200px" size="small" placeholder="名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="info.phone" style="width:200px;" size="small" placeholder="联系电话"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="看房时间" prop="time">
            <el-select v-model="info.time" placeholder="请选择看房时间" size="small">
                <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateData.updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateItem()" >修改</el-button>
      </span>
      </el-dialog>
      <el-drawer
            title="请选择楼盘(提示：选中某行后，请点击确定按钮)"
            :visible.sync="updateData.showTable"
            direction="rtl"
            size="50%">
            <el-input v-model="updateData.queryEstateParams.name" style="width:400px;margin-left:10px;margin-top:15px" size="small" placeholder="请输入楼盘名称模糊查询"></el-input>
            <el-button size="small" type="success" @click="queryEstate()" icon="el-icon-search" style="margin-left:10px">查询</el-button>
            <el-button size="small" type="primary" @click="selectEstateUpdate()" icon="el-icon-check" style="margin-left:10px">选择</el-button>
            <el-table :data="updateData.estaeList" 
                style="margin-left:10px"
                 highlight-current-row 
                 @current-change="handleCurrentChange" >
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column label="楼盘名称">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="150">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.province }}-{{scope.row.city}}-{{scope.row.area}}</span>
                </template>
            </el-table-column>
            <el-table-column label="建筑年代" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.year }}年</span>
                </template>
            </el-table-column>
            <el-table-column label="建筑类型" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.type}}</span>
                </template>
            </el-table-column>
            <el-table-column label="物业费" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.propertyCost}}元/月</span>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChangeUpdate"
          @current-change="handleCurrentChangeUpdate"
          :current-page="updateData.queryEstateParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="updateData.queryEstateParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="updateData.total">
        </el-pagination>
        </el-drawer>


        <el-dialog title="上传图片" :visible.sync="updateData.uploadFlag" width="30%">
            <span>房源id: <el-input style="width:80px" disabled v-model="info.id" size="small"></el-input></span>
            <p>房源室内图片</p>
            <el-upload
                action="http://121.199.58.229:8180/oss/file/upload"
                list-type="picture-card"
                :before-upload="beforeProductUpload"
                >
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="imageDialog">
            <img width="100%" :src="updateData.dialogImageUrl" alt />
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateData.uploadFlag = false">取 消</el-button>
                <el-button type="primary" @click="uploadImage(info.id)">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="房源审核" :visible.sync="updateStatusFlag" width="30%">
            <span>
                审核状态：
                <el-select v-model="statusValue" filterable clearable placeholder="状态" size="small">
                    <el-option
                    v-for="item in defaultStatusList"
                    :key="item.id"
                    :label="item.keyDesc"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateStatusFlag = false">取 消</el-button>
                <el-button type="primary" @click="updateHouseStatus">确 定</el-button>
            </span>
        </el-dialog>
        



    </div>
    
</template>

<script>
import VDistpicker from 'v-distpicker';
export default {
    name: 'houseList',
    components: {
        "v-distpicker": VDistpicker
    },
    data() {
        return {
            basePath: '/house/resources',
            queryParams: {
                title: '',
                code: '',
                minRent: '',
                maxRent: '',
                rentMethod: '',
                constact: '',
                phone: '',
                time: '',
                status: '',
                province: '',
                city: '',
                address: '',
                currPage: 1,
                pageSize: 10

            },
            total: 0,
            list: [],
            statusList: [],
            timeList: [],
            info: {
                id: '',
                title: '',
                code: '',
                estateId: '',
                estateName: '',
                province: '',
                city: '',
                area: '',
                address: '',
                year: '',
                type: '',
                propertyCost: '',
                propertyCompany: '',
                developers: '',
                buildingNum: '',
                buildingUnit: '',
                buidingFloorNum: '',
                rent: '',
                rentMethod: '',
                paymentMethod: '',
                houseType: '',
                coveredArea: '',
                useArea: '',
                floor: '',
                orientation: '',
                decoration: '',
                facilities: '',
                houseDesc: '',
                constact: '',
                phone: '',
                time: '',
                status: '',
                createTime: '',
                images: [],
                userId: ''
            },
            facilitiesArray: [],
            infoFlag: false,
            inofRules: {

            },
            
            updateData: {
                queryEstateParams: {
                    name: '',
                    currPage: 1,
                    pageSize: 10
                },
                fileList: [],
                orientationList: [],
                decorationList: [],
                paymentMethodList: [],
                rentMethodList: [],
                facilitiesList: [],
                estaeList: [],
                total: 0,
                estaeData: {
                    id: '',
                    name: '',
                    province: '',
                    city: '',
                    area: '',
                    address: '',
                    year: '',
                    type: '',
                    propertyCost: '',
                    propertyCompany: '',
                    developers: '',
               },
               currentRow: null,
               showTable: false,
               dialogImageUrl: '',
               dialogVisible: false,
               updateDialogVisible: false,
               uploadFlag: false,
            },
            infoRules: {
                estateName: [
                    { required: false, message: '请选择楼盘', trigger: 'change' },
                ],
                title: [
                    { required: true, message: '请输入房源标题', trigger: 'blur' }
                ],
                rent: [
                    { required: true, message: '请输入租金', trigger: 'blur' }
                ],
                paymentMethod: [
                    {  required: true, message: '请选择支付方式', trigger: 'change' }
                ],
                rentMethod: [
                    {  required: true, message: '请选择租赁方式', trigger: 'change' }
                ],
                buildingNum : [
                    { required: true, message: '请输入栋号', trigger: 'blur' }

                ],
                buildingUnit: [
                    { required: true, message: '请输入单元号', trigger: 'blur' }
                ],
                buidingFloorNum: [
                    { required: true, message: '请输入门牌号', trigger: 'blur' }
                ],
                coveredArea: [
                    { required: true, message: '请输入建筑面积', trigger: 'blur' }
                ],
                useArea: [
                    { required: true, message: '请输入使用面积', trigger: 'blur' }
                ],
                houseType: [
                    { required: true, message: '请输入房户型', trigger: 'blur' }
                ],
                floor: [
                    { required: true, message: '请输入楼层', trigger: 'blur' }
                ],
                constact: [
                    { required: true, message: '请输入联系人名称', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                orientation: [
                    { required: true, message: '请选择房屋朝向', trigger: 'change' }
                ],
                time: [
                    { required: true, message: '请选择看房时间', trigger: 'change' }
                ],
                decoration: [
                    { required: true, message: '请选择装修类型', trigger: 'change' }
                ],

            },
            imageDialog: false,
            updateStatusFlag: false,
            houseStatus: '',
            statusValue: 2,
            houseId: 0,
            defaultStatusList: [
                {
                    id: 100,
                    keyDesc: "审核通过",
                    value: 2
                },
                {
                    id: 101,
                    keyDesc: "审核不通过",
                    value: 3
                },
            ],
            permissionStrValue: ''
            
            


        }
    },
    created() {
        //this.queryPage();
        this.getStatusList();
        this.getTimeList();
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();
    },
    methods: {
        async queryPage() {
            const{data: res} = await this.$http.post(this.basePath + '/list-page', JSON.stringify(this.queryParams), {
                headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            console.log(res)
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.list = res.data;
            this.total = res.total;
        },
        async details(id) {
            this.infoFlag = true;
            this.getInfo(id);
        },
        async getInfo(id) {
            const{data: res} = await this.$http.get('/house/resources/get-info-by-id/' + id);
            console.log(res)
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.info = res.data.info;
            this.facilitiesArray = this.info.facilities.split(',');
        },
        edit(id) {
            this.getInfo(id);
            console.log(this.info.time)
            this.getHouseOrientationList();
            this.getHousePaymentMethodList();
            this.getHouseRentMethodList();
            this.getHouseDecorationList();
            this.getHouseFacilitiesList();
            
            this.updateData.updateDialogVisible = true;
            this.initDataValue()
        },
        initDataValue() {
            this.getHouseDecorationType();
            this.getHouseRentMethodType();
            this.getHousePaymentMethodType();
            this.getHouseOrientationType();
            this.getTimeType();
        },
        updateInfo() {

        },
        handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.queryPage();
        },
        handleCurrentPageChange(newPage) {
            this.queryParams.currPage = newPage;
            this.queryPage();

        },

        clear() {
            this.queryParams.title = '';
            this.queryParams.code = '';
            this.queryParams.minRent = '';
            this.queryParams.maxRent = '';
            this.queryParams.rentMethod = '';
            this.queryParams.constact = '';
            this.queryParams.phone = '';
            this.queryParams.time = '';
            this.queryParams.status = '';
            this.queryParams.province = '';
            this.queryParams.city = '';
            this.queryParams.address = '';
            this.queryParams.currPage = 1;
            this.queryParams.pageSize = 10;

        },

        async getStatusList() {
            var params = new Object();
            params.pageSize = 10;
            params.currPage = 1;
            params.type = '房源状态';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.statusList = res.data
        },
        async getTimeList() {
            var params = new Object();
            params.pageSize = 10;
            params.currPage = 1;
            params.type = '看房时间';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.timeList = res.data

        },
        async deleteById(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => {
                return err;
            });
            //当用户确认时，则返回值为字符串：confirm
            //取消时，返回字符串cancel
            if (confirmResult !== 'confirm'){
                return this.$message.info("已取消删除")
            }
            //
            const{data: res} = await this.$http.delete('/house/resources/delete/' + id);
            if(res.success) {
                this.$message.success("删除成功！");
                this.clear();
                this.queryPage();
            } else {
                this.$message.error(res.message);
            }

        },
        async queryEstate() {
           const{data: res} = await this.$http.post('/house/estate/list-page', JSON.stringify(this.updateData.queryEstateParams), {
                 headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.updateData.estaeList = res.data;
            this.updateData.total = res.total;

       },
      

        //朝向
       async getHouseOrientationList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '房屋朝向';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.updateData.orientationList = res.data

        },

        getHouseOrientationType() {
            for(var i = 0; i < this.updateData.orientationList.length; i++) {
                if(this.updateData.orientationList[i].keyDesc === this.info.orientation) {
                    this.info.orientation = this.updateData.orientationList[i].value;
                    break;
                }
            }

        },
    
       //获取后台支付方式字典
       async getHousePaymentMethodList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '支付方式';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.updateData.paymentMethodList = res.data

        },

        getHousePaymentMethodType() {
            for(var i = 0; i < this.updateData.paymentMethodList.length; i++) {
                if(this.updateData.paymentMethodList[i].keyDesc === this.info.paymentMethod) {
                    this.info.paymentMethod = this.updateData.paymentMethodList[i].value;
                    break;
                }
            }
        },

        //租赁方式
        async getHouseRentMethodList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '租赁方式';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.updateData.rentMethodList = res.data

        },

        getHouseRentMethodType() {
            for(var i = 0; i < this.updateData.rentMethodList.length; i++) {
                if(this.updateData.rentMethodList[i].keyDesc === this.info.rentMethod) {
                    this.info.rentMethod = this.updateData.rentMethodList[i].value;
                    break;
                }
            }

        },

        //装修方式
        async getHouseDecorationList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '装修类型';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.updateData.decorationList = res.data

        },

        getHouseDecorationType() {
            for(var i = 0; i < this.updateData.decorationList.length; i++) {
                if(this.updateData.decorationList[i].keyDesc === this.info.decoration) {
                    this.info.decoration = this.updateData.decorationList[i].value;
                    break;
                }
            }

        },

        //配置设施
        async getHouseFacilitiesList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '配套设施';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.updateData.facilitiesList = res.data

        },


        handleSizeChangeUpdate(newPageSize) {
            this.updateData.queryEstateParams.pageSize = newPageSize;
            this.queryEstate();
        },
        handleCurrentChangeUpdate(newPage) {
            this.updateData.queryEstateParams.currPage = newPage;
            this.queryEstate();

        },
        handleCurrentChange(val) {
            console.log(val)
           this.updateData.currentRow = val;
        },
        selectEstateUpdate() {
            if(this.updateData.currentRow === null) {
                return this.$message.error("您并未选择！")
            }
            this.info.estateId = this.updateData.currentRow.id;
            this.info.estateName = this.updateData.currentRow.name;
            this.info.province = this.updateData.currentRow.province;
            this.info.city = this.updateData.currentRow.city;
            this.info.area = this.updateData.currentRow.area;
            this.info.developers = this.updateData.currentRow.developers;
            this.info.propertyCost = this.updateData.currentRow.propertyCost;
            this.info.propertyCompany = this.updateData.currentRow.propertyCompany;
            this.info.year = this.updateData.currentRow.year;
            this.info.address = this.updateData.currentRow.address;
            this.updateData.showTable = false;
            this.updateData.currentRow = null;
            this.updateData.queryEstateParams.name = '';
            this.updateData.queryEstateParams.currPage = 1;
            this.updateData.queryEstateParams.pageSize = 10;

        },

        submitUpload(id) {
            this.updateData.uploadFlag = true;
            
        },
        beforeProductUpload(file) {
            this.updateData.fileList.push(file);
        },
        async uploadImage(id) {
            var fd = new FormData();
            fd.append("resourcesId", id);
            for(let i = 0; i < this.updateData.fileList.length; i++) {
                fd.append("files", this.updateData.fileList[i]);
            }
            const{data: res} = await this.$http.post('/house/images/upload-images',fd);
            console.log(res);
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.$message.success("上传成功");
            this.updateData.uploadFlag = false;
            this.updateData.fileList = [];
        },

        //审核
        updateStatus(id) {
            this.updateStatusFlag = true;
            this.houseId = id;
            this.houseStatus = this.statusValue;
            
        },
        async updateHouseStatus() {
            const{data: res} = await this.$http.put('/house/resources/update-status/' + this.houseId + '/' + this.houseStatus);
            console.log(res)
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.$message.success("更改成功");
            this.queryPage();
            this.updateStatusFlag = false
        },
        updateItem() {
            this.getHouseDecorationType();
            this.getHouseRentMethodType();
            this.getHousePaymentMethodType();
            this.getHouseOrientationType();
            this.getTimeType();
             this.$refs.infoUpdateForm.validate(async valid => {
               if(valid) {
                   //组装请求数据
                    var fd = new FormData();
                    fd.append("id", this.info.id);
                    fd.append("title", this.info.title);
                    fd.append("estateId", this.info.estateId);
                    fd.append("buildingNum", this.info.buildingNum);
                    fd.append("buildingUnit", this.info.buildingUnit);
                    fd.append("buidingFloorNum", this.info.buidingFloorNum);
                    fd.append("rent", this.info.rent.replace("元/月", ""));
                    fd.append("rentMethod", this.info.rentMethod);
                    fd.append("paymentMethod", this.info.paymentMethod);
                    fd.append("houseType", this.info.houseType);
                    fd.append("userId", this.info.userId);
                    if(this.info.coveredArea.includes('㎡')) {
                        fd.append("coveredArea", this.info.coveredArea);
                    } else {
                        fd.append("coveredArea", this.info.coveredArea + '㎡');
                    }
                    if(this.info.useArea.includes('㎡')) {
                        fd.append("useArea", this.info.useArea);
                    } else {
                        fd.append("useArea", this.info.useArea + '㎡');
                    }
                    
                    fd.append("floor", this.info.floor);
                    fd.append("orientation", this.info.orientation);
                    fd.append("decoration", this.info.decoration);
                    fd.append("facilitiesArray", this.facilitiesArray);
                    fd.append("houseDesc", this.info.houseDesc);
                    fd.append("constact", this.info.constact);
                    fd.append("phone", this.info.phone);
                    fd.append("time", this.info.time);
                    console.log(this.info)

                   const {data: res} = await this.$http.post('/house/resources/update', fd);
                   console.log(res)
                    if (res.success){
                        this.$message.success("更新成功");
                        this.getInfo(this.info.id);
                        this.queryPage();
                        return true;
                    }else {
                        return this.$message.error(res.message);
                    }
                    }else {
                        return this.$message.error("请填写表单");
                    }
           })

        },

        getTimeType() {
            for(var i = 0; i < this.timeList.length; i++) {
                if(this.timeList[i].keyDesc === this.info.time) {
                    this.info.time = this.timeList[i].value;
                    break;
                }
            }
        }


    }
}
</script>

<style scoped>
  .font-class{
      font-size: 10px;
      margin-bottom: 115px;
      color: brown;
  }
</style>